<template>
  <div id="houseSave">
    <div><span style="padding: 0 20px;line-height: 60px;font-size: 20px">库存查询</span></div>
    <el-form :inline="true" :model="search" class="demo-form-inline" style="padding: 0 20px;">
      <el-form-item label="产品名称">
        <el-input v-model="search.productName" placeholder="请输入产品名称" @keypress.native.enter="searchData"/>
      </el-form-item>
      <el-form-item label="产品英文名称">
        <el-input v-model="search.productNameEn" placeholder="请输入产品英文名称" @keypress.native.enter="searchData"/>
      </el-form-item>
      <el-form-item label="产品编号">
        <el-input v-model="search.productNum" placeholder="请输入产品编号" @keypress.native.enter="searchData"/>
      </el-form-item>
      <el-form-item label="产品规格">
        <el-input v-model="search.productSpecName" placeholder="请输入产品规格" @keypress.native.enter="searchData"/>
      </el-form-item>
      <el-form-item label="仓库名称">
        <el-input v-model="search.storehouseName" placeholder="请输入仓库名称" @keypress.native.enter="searchData"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="searchData">查询</el-button>
        <el-dropdown
          v-if="moreTypes.length > 0"
          trigger="click"
          @command="handleTypeDrop">
          <flexbox class="right-more-item">
            <div>更多</div>
            <i
              class="el-icon-arrow-down el-icon--right"
              style="color:#777;"/>
          </flexbox>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item
              v-for="(item, index) in moreTypes"
              :key="index"
              :command="item.type">{{ item.name }}</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-form-item>
    </el-form>
    <div
      xs-empty-icon="nopermission"
      xs-empty-text="暂无权限"
      class="psi-container">
      <el-table
        v-loading="loading"
        id="psi-table"
        :data="list"
        :height="tableHeight"
        :cell-style="cellStyle"
        class="n-table--border"
        stripe
        border
        highlight-current-row
        style="width: 100%;">
        <el-table-column
          v-for="(item, index) in fieldList"
          :key="index"
          :fixed="index==0"
          :prop="item.fieldName"
          :label="item.name"
          width="150">
          <template
            slot-scope="scope">
            <div v-if="scope.column.property === 'productType'" :title="scope.row.productType" class="table-head-name">{{ scope.row.productType===0 ? '进销存(对内)' : (scope.row.productType===1 ? '商机(对外)' : '通用') }}</div>
            <div v-else :title="scope.row[item.fieldName]" class="table-head-name">{{ scope.row[item.fieldName] }}</div>
          </template>
        </el-table-column>
        <el-table-column/>
      </el-table>
      <div class="p-contianer">
        <el-pagination
          :current-page="currentPage"
          :page-sizes="pageSizes"
          :page-size.sync="pageSize"
          :total="total"
          class="p-bar"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"/>
      </div>
    </div>
    <p-s-i-export
      :show="showPSIExport"
      :psi-type="psiType"
      :els-search="elsSearch"
      :export-params="exportParams"
      @close="showPSIExport=false"/>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import {
  psiSearchhouseRead,
  psiSearchhouseList
} from '@/api/psimanagement/storehouse'
import PSIExport from '../components/PSIExport'
export default {
  /** 客户管理 的 产品列表 */
  name: 'MaterialIndex',
  components: {
    PSIExport
  },
  data() {
    return {
      loading: false, // 加载动画
      fieldList: [],
      list: [],
      currentPage: 1,
      pageSize: 15,
      pageSizes: [15, 30, 60, 100],
      total: 0,
      search: {
        productName: '',
        productStatus: '',
        productNameEn: '',
        productNum: '',
        productSpecName: '',
        storehouseName: ''
      },
      tableHeight: document.documentElement.clientHeight - 295,
      /** 更多操作 */
      moreTypes: [],
      // 导入
      showPSIImport: false,
      // 导出
      showPSIExport: false,
      // 导出选中参数
      exportParams: {},
      elsSearch: {}
    }
  },
  computed: {
    ...mapGetters(['psi']),
    psiType() {
      return this.getEnterType(this.$route.path)
    }
  },
  mounted() {
    if (this.psi[this.psiType].export) {
      this.moreTypes.push({ type: 'out', name: '导出' })
    }
    this.getHeaderList()
    this.getPageList()
  },
  methods: {
    getEnterType(val) {
      const str = val
      var two = ''
      const first = str.indexOf('/') + 1 // 从第一个横杠算起（+1表示不包括该横杠）
      const kong = str.indexOf(' ', first) // 第一个横杠后的第一个空格
      const heng = str.indexOf('/', first) // 第一个横杠后的第一个横杠（即第二个横杠）
      if (heng == -1) {
        two = str.substring(kong).substring(1, str.length)
      } else {
        two = str.substring(heng).substring(1, str.length)
      }
      return two
    },
    handleTypeDrop(command, params = {}) {
      if (command == 'out') {
        let paramsData = {}
        if (params.__export) {
          paramsData = params
          delete paramsData.__export
        } else {
          paramsData = {}
        }
        this.exportParams = paramsData
        this.elsSearch = this.search
        delete this.elsSearch.page
        delete this.elsSearch.limit
        this.showPSIExport = true
      } else if (command == 'enter') {
        this.showPSIImport = true
      }
    },
    /** 通过回调控制style */
    cellStyle({ row, column, rowIndex, columnIndex }) {
      if (column.property === 'name') {
        return { color: '#3E84E9', cursor: 'pointer' }
      } else {
        return ''
      }
    },
    // 获取表头
    getHeaderList() {
      psiSearchhouseRead()
        .then(res => {
          this.fieldList = res.data
          this.loading = false
        })
        .catch(() => {
          this.loading = false
        })
    },
    // 检索数据
    searchData() {
      this.currentPage = 1
      this.getPageList()
    },
    // 获取数据
    getPageList() {
      this.loading = true
      var praprm = this.search
      praprm['page'] = this.currentPage
      praprm['limit'] = this.pageSize
      psiSearchhouseList(praprm)
        .then(res => {
          this.list = res.data.list
          this.total = res.data.totalRow
          this.loading = false
        })
        .catch(() => {
          this.loading = false
        })
    },
    // 更改每页展示数量
    handleSizeChange(val) {
      this.pageSize = val
      this.getPageList()
    },
    // 更改当前页数
    handleCurrentChange(val) {
      this.currentPage = val
      this.getPageList()
    }
  }
}
</script>

<style lang="scss" scoped>
  @import '../../psimanagement/styles/table.scss';
  .right-more-item {
    cursor: pointer;
    border: 1px solid #dcdfe6;
    background-color: white;
    font-size: 13px;
    color: #777;
    padding: 0 12px;
    border-radius: 2px;
    height: 34px;
  }
</style>

